Learning Objectives

After completing this lesson, you’ll be able to:

• Learn all the parameters in an FME Flow App.
• Integrate a map selection tool in an FME Flow App.

Resources

• Starting FME Flow project | C:\FMEData\Workspaces\CreateDataIntegrationApps\exercise-create-an-fme-flow-app-complete.fsproject
• Complete FME Flow project | C:\FMEData\Workspaces\CreateDataIntegrationApps\exercise-customize-an-fme-flow-app-complete.fsproject
• Seismograph.jpg | C:\FMEData\Resources\FlowAuthoring\FlowApps\Seismograph.jpg

Video

Introduction

If you want to quickly create an FME Flow App primarily for internal use, you might not care how it appears. But if you are creating an end-user or public-facing app, you probably want it to reflect your brand. This is especially true if you plan on hosting the app where it needs to blend in, such as your organization's website. 

Luckily, you can customize your App in a number of ways.

1) Edit Flow App

You created the Recent Earthquake Visualization Flow App in the last exercise. To edit it, click the Flow Apps section in the FME Flow menu, and then click Manage Workspace Apps.

Click on earthquakes-extrusion to edit it.

2) Customize Flow App

Below the workspace selection area, you will see the collapsed Parameters and Customize sections.

Expand Customize by clicking on it. Here you can control many areas of the Flow App page to match your organization's branding, including:

• Title: The title will be displayed at the top of the app and in the browser tab.
• Background Color: The background color will be displayed at the top of the app.
• Heading Image: The heading image will be used at the top of the app. There is a 1 MB file size limit for the heading image.
• Icon: The icon will be visible in the browser tab. There is a 300 KB file size limit for icon images.

Here is where those different elements will appear on the App page:

Change Header Background Color to green. Then download Seismograph.jpg and set it as the Footer Logo. You can also edit any of the other customization parameters if you wish.

Click OK to finish editing the Flow App.

3) View Customized Flow App

Click the link on the resulting page to view your app.

You should see a green header and large footer image.